<template>
    <div class="content">
        <img class="image" src="@/static/images/common/empty.png" />
        <p class="status">目前暂无可用卡券</p>
        <p class="desc">如在美团、大众上购买卡券的，可以选择团购兑换或者直接购买卡券</p>
        <div class="btn-group">
            <u-button
                color="#5428EC"
                text="购买卡券"
                :customStyle="{ width: '100%' }"
                @click="buyCard"
            ></u-button>
            <u-button
                color="#5428EC"
                plain
                text="团购验券"
                @click="convertCard"
                :customStyle="{ width: '100%', marginTop: '20rpx' }"
            ></u-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'empty',
    data() {
        return {
            id: null,
        };
    },
    onLoad(options) {
        if (options.id) {
            this.id = Number(options.id);
        }
    },
    methods: {
        buyCard() {
            uni.navigateTo({
                url: '/pages/card/list?id=' + this.id,
            });
        },
        convertCard() {
            uni.navigateTo({
                url: '/pages/coupon/convert',
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    background: #fff;
    padding: 100rpx 30rpx;
    @include flexBox(flex-start, center, column);
    .image {
        width: 300rpx;
        height: 244rpx;
    }
    .status {
        font-size: 32rpx;
        font-weight: 600;
        color: #2f2f2f;
        margin-top: 20rpx;
    }
    .desc {
        font-size: 24rpx;
        color: #979797;
        margin-top: 18rpx;
        text-align: center;
        padding: 0 50rpx;
    }
    .btn-group {
        width: 100%;
        margin-top: 76rpx;
    }
}
</style>
